<template>
  <div>
    <img :style="barcodeImg" :class="'barcode-' + this.number" alt="条形码" src=""/>
  </div>
</template>

<script>
  import JsBarcode from 'jsbarcode'

  export default {
    name: "JsBarcode",
    props: {
      number: {
        required: true
      },
      width: {
        default: '80mm'
      },
      height: {
        default: '10mm'
      }
    },
    computed: {
      barcodeImg() {
        return {
          'width': this.width,
          'height': this.height,
          'object-fit': 'cover'
        }
      }
    },
    mounted() {
      JsBarcode(".barcode-" + this.number, this.number, {
        format: "CODE128",  //条形码的格式
        lineColor: "#000000",  //线条颜色
        width: 2, //线宽
        height: 100,  //条码高度
        displayValue: false, //是否显示文字信息
        margin: 0
      });
    }
  }
</script>
